<template>
  <Modal v-model="show" title="分配系统">
    <Transfer class="transfer"
              :data="data"
              :target-keys="targetKeys"
              :list-style="listStyle"
              :titles="['未分配系统', '已分配系统']"
              filterable
              :filter-method="filterMethod"
              @on-change="handleChange"></Transfer>
    <template #footer>
      <Button style="margin-right: 8px" @click="show = false">关闭</Button>
      <Button type="primary" :loading="loading" @click="handleSave">保存</Button>
    </template>
  </Modal>
</template>
<script>
export default {
  props: {
    modelValue: {
      required: true,
      type: Boolean
    },
    menuId: {type: Number, required: true}
  },
  watch: {
    menuId: function (newVal) {
      // 根据菜单ID 查询 系统和关联信息
      console.log("menuId = " + newVal) ;
    }
  },
  data() {
    return {
      loading: false,
      data: [
        {key: 1, label: "权限管理系统"},
        {key: 2, label: "爱下载资源分享平台管理系统"},
        {key: 3, label: "积分商城管理系统", disabled: true},

      ],
      targetKeys: [2],
      listStyle: {
        height: '500px',
      }
    }
  },
  methods: {
    handleChange(newTargetKeys) {
      this.targetKeys = newTargetKeys;
    },
    filterMethod(data, query) {
      return data.label.indexOf(query) > -1;
    },
    handleSave() {
      this.loading = true;
      // 获取选中的系统ID  this.targetKeys, 并保存数据
    }
  },
  emits: ["update:model-value"],
  computed: {
    show: {
      get() {
        return this.modelValue;
      },
      set(val) {
        this.$emit("update:model-value", val);
      }
    }
  }
}
</script>

<style>
.transfer .ivu-transfer {
  text-align: center;
}

.transfer .ivu-transfer-list-footer {
  border: none;
}

.transfer .ivu-transfer-list-content {
  text-align: left;
}
</style>
